<template>
    <div>
        <h1>{{ title }}
            <el-button type="text"
                       @click="addNewCategory">
                {{btnText}}
            </el-button>
        </h1>
        <div class="panel panel-success">
            <div class="panel-body">
                <el-table
                        ref="multipleTable"
                        :data="categoryTableData"
                        tooltip-effect="dark"
                        show-overflow-tooltip
                        style="width: 100%"
                        stripe
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="分类名"
                            prop="name"
                            show-overflow-tooltip
                            width="120">
                    </el-table-column>
                    <el-table-column
                            :width="descriptionWidth"
                            prop="description"
                            show-overflow-tooltip
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="stock"
                            label="推荐度">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="是否开放">
                        <template slot-scope="scope">
                            <el-switch
                                    :width="switchWidth"
                                    v-model="scope.row.grounding"
                                    on-text="已开放"
                                    off-text="已关闭">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            :width="btnWidth"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="small"
                                    @click="handleEdit(scope.$index, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                            <el-button
                                    size="small"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <footer>
                    <el-button type="primary" @click="batchUp">批量开放</el-button>
                    <el-button type="warning" @click="batchDown">批量关闭</el-button>
                    <el-button type="danger" @click="batchDelete">批量删除</el-button>
                    <div class="pagination-content pull-right">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="200">
                        </el-pagination>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Category',
    data () {
      return {
        title: '菜品分类',
        btnText: '新建分类',
        btnWidth: 120,
        switchWidth: 80,
        descriptionWidth: 500,
        categoryTableData: [
          {
            id: 1,
            stock: 20,
            name: '热菜',
            description: '这是现炒现做的热菜',
            grounding: true
          },
          {
            id: 1,
            name: '西餐',
            stock: 20,
            description: '正宗西餐大厨精心制作',
            grounding: true
          },
          {
            id: 1,
            name: '中餐',
            stock: 20,
            description: '大中华风味美食',
            grounding: true
          },
          {
            id: 1,
            stock: 20,
            name: '凉菜',
            description: '饭前凉菜',
            grounding: true
          },
          {
            id: 1,
            name: '饮品',
            stock: 20,
            description: '鲜榨果汁，醇香奶茶',
            grounding: true
          },
          {
            id: 1,
            name: '主食',
            stock: 20,
            description: '没有主食如何能吃得饱',
            grounding: true
          },
          {
            id: 1,
            stock: 20,
            name: '汤品',
            description: '精心熬制各种养生汤',
            grounding: true
          }
        ]
      }
    },
    methods: {
      handleSelectionChange (val) {
        console.log(val)
      },
      handleDelete (index, row) {
        console.log(index, row)
        this.$confirm('确定删除' + row.name + '，删除后不可撤销, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.categoryTableData.splice(index, index + 1)
          this.$notify({
            title: '删除成功',
            message: '成功删除:' + row.name,
            type: 'success'
          })
        }).catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleEdit (index, row) {
        let id = row.id
        this.$router.push({name: 'category.detail', params: {id: id}})
      },
      handleCurrentChange (val) {
        console.log(val)
      },
      handleSizeChange (val) {
        console.log(val)
      },
      batchUp () {
        let selection = this.$refs.multipleTable.selection
        for (let i = 0; i < selection.length; i++) {
          selection[i].grounding = true
        }
      },
      batchDown () {
        let selection = this.$refs.multipleTable.selection
        for (let i = 0; i < selection.length; i++) {
          selection[i].grounding = false
        }
      },
      batchDelete () {
        this.$notify({
          type: 'error',
          message: '功能待开发',
          duration: 1000
        })
      },
      addNewCategory () {
        this.$router.push({name: 'category.detail', params: {id: 0}})
      }
    }
  }
</script>

<style>
    footer {
        padding: 10px 0;
    }
</style>
